<template>
  <div class="crazylist">
    <div class="crazylist-update">
      <van-icon name="clock-o" />
      <span>距离下次排名更新还有 {{ miunte }} 分 {{ second }}秒</span>
    </div>
    <div class="crazylist-topthree">
      <div
        :class="'crazylist-topthree-part part' + i"
        v-for="(item, i) in craztListTopThree"
        :key="item.id"
      >
        <div class="crazylist-topthree-img">
          <img :src="item.pic" :class="'top' + i + 'img'" />
        </div>
        <div class="crazylist-topthree-sellnum">
          <div>
            2小时内疯抢
            {{
              (item.salesNum =
                item.salesNum > 10000
                  ? (item.salesNum / 10000).toFixed(1) + "万"
                  : item.salesNum)
            }}
            件
          </div>
        </div>
        <div class="crazylist-topthree-title">{{ item.dtitle }}</div>
        <div class="crazylist-topthree-quan">
          <span class="crazylist-topthree-quan-1">￥</span>
          <span class="crazylist-topthree-quan-2">{{ item.jiage }}</span>
          <span class="crazylist-topthree-quan-3">券后</span>
        </div>
        <div class="crazylist-topthree-1">top {{ i + 1 }}</div>
      </div>
    </div>
    <div class="crazylist-list">
      <div class="crazylist-list-part" v-for="item in craztList" :key="item.id">
        <div class="crazylist-list-img">
          <img :src="item.pic" alt="" />
        </div>
        <div class="crazylist-list-info">
          <div class="crazylist-list-info-title">
            <img
              class="shoplabe"
              :src="item.mallDesc === '天猫' ? tm : tmcs"
              alt=""
            />
            <span class="crazylist-list-info-title-1">{{ item.dtitle }}</span>
          </div>
          <div class="crazylist-list-info-quan">
            <span>券</span>
            {{ item.quanJine }} 元
          </div>
          <div class="crazylist-list-info-price">
            <span class="crazylist-list-info-price-1">￥</span>
            <span class="crazylist-list-info-price-2">{{ item.jiage }}</span>
            <span class="crazylist-list-info-price-3">券后</span>
            <span class="crazylist-list-info-price-4">{{ item.yuanjia }}</span>
          </div>
          <div class="crazylist-list-info-buy">
            近2小时内疯抢
            <span>{{
              (item.xiaoliang =
                item.xiaoliang > 10000
                  ? (item.xiaoliang / 10000).toFixed(1) + "万"
                  : item.xiaoliang)
            }}</span>
            件
            <div class="crazylist-list-info-buy-1">立即抢</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    let d = new Date();

    const store = useStore();

    const state = reactive({
      miunte: d.getMinutes(),
      second: d.getSeconds(),
      tm: "",
      tmcs: "",
    });

    const time = () => {
      setInterval(() => {
        state.second++;
      }, 1000);
    };

    const craztList = computed(() => {
      return store.state.crazy.craztList.slice(3);
    });

    const craztListTopThree = computed(() => {
      return store.state.crazy.craztList.slice(0, 3);
    });

    onMounted(() => {
      time();
    });

    return {
      ...toRefs(state),
      craztList,
      craztListTopThree,
    };
  },
});
</script>

<style lang="stylus" scoped>
.crazylist
    overflow hidden
    background #eee url(https://cmsstatic.ffquan.cn/dist/static/header_bg.12963398.png) 0% 0% / 100% 1.5rem no-repeat
    .crazylist-update
        height: .2rem;
        background rgba(255,129,70,.9)
        border-radius: .1rem;
        display: table;
        margin .12rem auto .29rem;
        padding 0 .1rem
        font-size .11rem
        color #fff
        line-height: .2rem
    .crazylist-topthree
        display flex
        justify-content space-evenly
        margin-top .5rem
        .crazylist-topthree-part
            position relative
            width: 1.1rem;
            height: 1.8rem;
            background: #fff;
            border-radius: .07rem;
            padding: .05rem;
            position: relative;
            box-sizing border-box
            .crazylist-topthree-img
                img
                    width 1rem
                    height 1rem
                    border-radius .05rem
                    display block
            .crazylist-topthree-sellnum
                width .8rem
                height .17rem
                border-radius .085rem
                background linear-gradient(270deg,#ffa700,#ff4728)
                box-shadow 0 0.02rem 0.04rem 0 rgb(255 133 0 / 40%);
                line-height .17rem
                padding: 0 .09rem;
                font-size .1rem
                color #fff
                margin 0 auto
                overflow hidden
                div
                    width 2rem
                    transform scale(.8)
                    margin-left -.26rem
                    margin-top .02rem
            .crazylist-topthree-title
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                height: .17rem;
                font-size: .12rem;
                color: #333;
                line-height: .17rem;
                margin-top: .08rem;
                margin-bottom .05rem
            .crazylist-topthree-quan
                font-size .1rem
                color #fe3738
                .crazylist-topthree-quan-2
                    font-size .2rem
            .crazylist-topthree-1
                width .23rem
                height .28rem
                position absolute
                left .05rem
                top -.025rem
                font-size .1rem
                color red
                background yellow
        .part1
            height 2rem
            margin-top -.2rem
            .top1img
                height 1.2rem !important
    .crazylist-list
        .crazylist-list-part
            width 3.55rem
            height 1.2rem
            background #fff
            border-radius .08rem
            margin .1rem auto 0
            display flex
            .crazylist-list-img
                margin .05rem .07rem 0 .05rem
                img
                    width 1.1rem
                    height 1.1rem
            .crazylist-list-info
                .crazylist-list-info-title
                    font-size: .13rem;
                    height .18rem
                    color #333
                    line-height .13rem
                    margin-top .05rem
                    margin-bottom .11rem
                    display flex
                    align-items center
                    .crazylist-list-info-title-1
                        display inline-block
                        max-width 2rem
                        overflow hidden
                        text-overflow ellipsis
                        white-space nowrap
                        margin-left .05rem
                    .shoplabe
                        width .23rem
                        margin-right .02rem
                .crazylist-list-info-quan
                    width .5rem
                    height .12rem
                    background linear-gradient(90deg,#ff8873,#ff4f4f)
                    border-radius .02rem
                    display flex
                    line-height .12rem
                    padding 0 .03rem 0 .01rem
                    font-size .1rem
                    color #fff
                    span
                        display: inline-block;
                        font-size: .09rem;
                        font-weight: 400;
                        color: #ff5351;
                        line-height: .09rem;
                        padding: 1px .02rem;
                        background: #fff;
                        border-radius: .01rem 0 0 .01rem;
                        text-align: center;
                        margin-right: .03rem;
                .crazylist-list-info-price
                    font-size .1rem
                    color #fe3738
                    margin-top .1rem
                    .crazylist-list-info-price-1
                        font-size .12rem
                        font-weight 500
                    .crazylist-list-info-price-2
                        font-size .17rem
                        font-weight 500
                        margin-right .02rem
                    .crazylist-list-info-price-4
                        text-decoration line-through
                        height .13rem
                        font-size: .1rem;
                        color #999
                        line-height .13rem
                        margin-left .05rem
                .crazylist-list-info-buy
                    display flex
                    width 2.2rem
                    height .28rem
                    background #ffeee6
                    border-radius 0 1rem 1rem 0
                    font-size .11rem
                    color #893c11
                    line-height .28rem
                    padding-left .11rem
                    position relative
                    margin-top .1rem
                    span
                        display inline-block
                        font-size .13rem
                        color #ff5b00
                        margin 0 .02rem
                    .crazylist-list-info-buy-1
                        background #FF4525
                        width .82rem
                        height .28rem
                        font-size .12rem
                        font-weight 500
                        color #fff
                        text-align center
                        color #fff
                        border-radius 0 1rem 1rem 0
                        position absolute
                        right 0
</style>
